// grunt的常用插件

// grunt-sass：编译scss文件为css文件
// cnpm install grunt-sass sass --save-dev
// yarn grunt sass

// grunt-babel： 编译es6+代码文件为js文件
// cnpm install grunt-babel @babel/core @babel/preset-env --save-dev
// yarn grunt babel

// grunt-contrib-watch： 监听文件触发任务
// cnpm install grunt-contrib-watch --save-dev
// yarn grunt watch

// grunt-contrib-clean: 清除文件
// cnpm install grunt-contrib-clean --save-dev
// yarn grunt clean

// 可以自动加载所有grunt插件中的任务
// cnpm install load-grunt-tasks --save-dev

const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')

module.exports = grunt => {
    grunt.initConfig({
        sass: {
            options: {
                sourceMap: true,
                implementation: sass
            },
            main: {
                files: {
                    'dist/css/main.css' : 'src/css/main.scss'
                }
            }
        },

        babel: {
            options: {
                presets: ['@babel/preset-env'] // 可编译所有最新es6的特性
            },
            main: {
                files: {
                    'dist/js/app.js' : 'src/js/app.js'
                }
            }
        },

        watch: {
            js: {
                files: ['src/js/*.js'],
                tasks: ['babel']
            },
            css: {
                files: ['src/css/*.scss'],
                tasks: ['sass']
            }
        },

        clean: {
            temp: 'dist/**' // 删除dist文件夹以及其下所有文件
        }
    })

    // grunt.loadNpmTasks('grunt-sass')
    // grunt.loadNpmTasks('grunt-babel')
    loadGruntTasks(grunt) // 它可以自动加载所有grunt插件中的任务

    grunt.registerTask('default', ['sass', 'babel', 'watch'])
}